import React, { Component } from 'react'
import { Row, Col, Card } from 'antd';
import './index.less'
import echarts from 'echarts'

import { createRef } from 'react';

import { getAmount } from '../../requests'

export class Dashbaord extends Component {
    constructor() {
        super()
        this.state = {
            month: [],
            count: []

        }
        this.articleAmout = createRef()



    }
    componentDidMount() {


        this.pageInit()
        //   this.echartsInit()

    }
    pageInit = () => {

        getAmount().then((res) => {
            if (res.code == 200) {
                const month = []
                const count = []
                res.data.amount.map((item) => {
                    month.push(item['month'])
                    count.push(item['value'])
                })


                this.setState({
                    month,
                    count
                }, () => {
                    this.echartsInit()
                })
               
            }



        })
    }
    echartsInit = () => {

       
        const myChart1 = echarts.init(this.articleAmout.current)
        const myChart2 = echarts.init(this.refs.abc)
        const myChart3 = echarts.init(this.refs.echarts)
        const myChart4 = echarts.init(this.refs.echarts1)
        const myChart5 = echarts.init(this.refs.echarts2)
        const colors = ['#5793f3', '#d14a61', '#675bba'];
        const option1 = {
            color: colors,
        
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                right: '30%'
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data:['蒸发量','降水量','平均温度']
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '蒸发量',
                    min: 0,
                    max: 250,
                    position: 'right',
                    axisLine: {
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} ml'
                    }
                },
                {
                    type: 'value',
                    name: '降水量',
                    min: 0,
                    max: 250,
                    position: 'right',
                    offset: 80,
                    axisLine: {
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} ml'
                    }
                },
                {
                    type: 'value',
                    name: '温度',
                    min: 0,
                    max: 25,
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: colors[2]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                }
            ],
            series: [
                {
                    name:'蒸发量',
                    type:'bar',
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                    name:'降水量',
                    type:'bar',
                    yAxisIndex: 1,
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                },
                {
                    name:'平均温度',
                    type:'line',
                    yAxisIndex: 2,
                    data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
            ]
        };
        



        









        //  指定图表的配置项和数据
    


        const option2 = {
            title: {
                left: 'center',
                text: '访问量趋势图',
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                type: 'category',
                data: this.state.month
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: this.state.count,
                type: 'line'
            }]
            
        };
        var data = [];

        for (var i = 0; i <= 360; i++) {
            var t = i / 180 * Math.PI;
            var r = Math.sin(2 * t) * Math.cos(2 * t);
            data.push([r, i]);
        }
        
       const  option3 = {
            title: {
                text: '极坐标双数值轴'
            },
            legend: {
                data: ['line']
            },
            polar: {
                center: ['50%', '54%']
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            angleAxis: {
                type: 'value',
                startAngle: 0
            },
            radiusAxis: {
                min: 0
            },
            series: [{
                coordinateSystem: 'polar',
                name: 'line',
                type: 'line',
                showSymbol: false,
                data: data
            }],
            animationDuration: 1000
        };

        const option4 = {
            title : {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

       const option5 = {
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    name: '业务指标',
                    type: 'gauge',
                    detail: {formatter:'{value}%'},
                    data: [{value: 50, name: '完成率'}]
                }
            ]
        };
        
        setInterval(function () {
            option5.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            myChart5.setOption(option5, true);
        },2000);
        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
        myChart2.setOption(option2);
        myChart3.setOption(option3);
        myChart4.setOption(option4)
    }
    render() {

        return (
            <div>
                <Card title="仪表盘" >
                    <Row gutter={72}>
                        <Col className="gutter-row" span={6}>
                            <div className="gutter-box">col-6</div>
                        </Col>
                        <Col className="gutter-row" span={6}>
                            <div className="gutter-box">col-6</div>
                        </Col>
                        <Col className="gutter-row" span={6}>
                            <div className="gutter-box">col-6</div>
                        </Col>
                        <Col className="gutter-row" span={6}>
                            <div className="gutter-box">col-6</div>
                        </Col>
                        <div style={{ marginTop: '190px', display: 'flex', justifyContent: 'center' }}>
                            <div ref={this.articleAmout} id='main' style={{ width: '700px', height: '400px' }}></div>
                            <div ref='abc' style={{ width: '600px', height: '400px', float: "left" }}></div>
                            <div ref='echarts' style={{ width: '600px', height: '400px' }}></div>
                            
                        </div>
                        <div style={{ marginTop: '190px', display: 'flex', justifyContent: 'center' }}>
                        <div ref='echarts1' style={{ width: '600px', height: '400px' }}></div>
                        <div ref='echarts2' style={{ width: '600px', height: '400px' }}></div>
                        </div>
                    </Row>
                </Card>

            </div>
        )
    }
}

export default Dashbaord

